<template>
  <div>
    <template v-if="!!designer.selectedWidget">
      <el-form :model="optionModel" size="small" label-position="left" label-width="80px" class="setting-form"
               @submit.prevent>
        <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
          <el-collapse-item name="1" v-if="showCollapse(layoutProps)"
                            title="布局">
            <template v-for="(editorName, propName) in layoutProps">
              <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
                         :designer="designer" :selected-widget="selectedWidget"
                         :option-model="optionModel"></component>
            </template>
          </el-collapse-item>
          <el-collapse-item name="2" v-if="showCollapse(spaceProps)"
                            title="间距">
            <template v-for="(editorName, propName) in spaceProps">
              <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
                         :designer="designer" :selected-widget="selectedWidget"
                         :option-model="optionModel"></component>
            </template>
          </el-collapse-item>
          <el-collapse-item name="3" v-if="showCollapse(sizeProps)"
                            title="尺寸">
            <template v-for="(editorName, propName) in sizeProps">
              <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
                         :designer="designer" :selected-widget="selectedWidget"
                         :option-model="optionModel"></component>
            </template>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </template>
  </div>
</template>
<script>
import WidgetProperties from "@/components/form-designer/setting-panel/propertyRegister"
import containerStyleEditor
  from "@/components/form-designer/setting-panel/property-editor/container-layout/containerStyle-editor.vue";
import spaceStyleEditor
  from "@/components/form-designer/setting-panel/property-editor/container-layout/spaceStyle-editor.vue";
import sizeStyleEditor
  from "@/components/form-designer/setting-panel/property-editor/container-layout/sizeStyle-editor.vue";

const {LAYOUT_PROPERTIES, SPACE_PROPERTIES, SIZE_PROPERTIES} = WidgetProperties
export default defineComponent({
  name: "style-setting",
  components: {
    containerStyleEditor,
    spaceStyleEditor,
    sizeStyleEditor
  },
  props: ['designer', 'selectedWidget', 'showCollapse', 'hasPropEditor', 'getPropEditor'],
  data() {
    return {
      widgetActiveCollapseNames: ['1', '2', '3'],
      layoutProps: LAYOUT_PROPERTIES,
      spaceProps: SPACE_PROPERTIES,
      sizeProps: SIZE_PROPERTIES
    }
  },
  computed: {
    optionModel: {
      get() {
        return this.selectedWidget.options
      },

      set(newValue) {
        this.selectedWidget.options = newValue
      }
    }
  }
})
</script>
<script setup>

</script>

<style scoped>
.setting-scrollbar {
  height: 100%;

  :deep(.ep-scrollbar__wrap) {
    overflow-x: hidden; /* IE浏览器隐藏水平滚动条箭头！！ */
  }
}

.setting-collapse {
  :deep(.ep-collapse-item__content) {
    padding-bottom: 6px;
  }

  :deep(.ep-collapse-item__header) {
    font-style: italic;
    font-weight: bold;
  }
}
</style>
